// uni.scss全局样式初始化参数 字体,颜色
@import "~@/uni.scss";

//弹性盒子相关:
//$direction: 取值范围如下:
//	row： 主轴与行内轴方向作为默认的书写模式。即横向从左到右排列（左对齐）。
//	row-reverse： 对齐方式与row相反。
//	column： 主轴与块轴方向作为默认的书写模式。即纵向从上往下排列（顶对齐）。
//	column-reverse： 对齐方式与column相反。
// 主轴为'direction'时的水平垂直居中
@mixin flex-center($direction: row) {
  display: flex;
  align-items: center;
  justify-content: center;
  @if $direction {
    flex-direction: $direction;
  }
}
// 垂直居中,左对齐
@mixin flex-center-left {
  display: flex;
  align-items: center;
}

// 垂直居中,右对齐
@mixin flex-center-right {
  align-items: center;
  display: flex;
  justify-content: flex-end;
}

// 主轴为'direction'时,垂直居中,水平方向两端对齐
@mixin flex-between($direction: row) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  @if $direction {
    flex-direction: $direction;
  }
}

// 主轴为'direction'时,垂直居中,水平方向平均分布
@mixin flex-around($direction: row) {
  display: flex;
  align-items: center;
  justify-content: space-around;
  @if $direction {
    flex-direction: $direction;
  }
}

// 背景图片
// auto： 背景图像的真实大小。
// cover： 将背景图像等比缩放到完全覆盖容器，背景图像有可能超出容器。
// contain： 将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，背景图像始终被包含在容器内。
@mixin background-img($url: false, $size: cover) {
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position: center center;
  background-size: $size;
  @if $url {
    background-image: url($url);
  }
}

// 单行文本省略号...
@mixin ellipsis-single {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: inline-block;
}

// 多行文本省略号...
@mixin ellipsis-multi($num: 2) {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: $num;
}

// 文字两端对齐
@mixin text-justify {
  text-align: justify;
  text-justify: inter-ideograph;
}

// 强制换行
@mixin toWrap {
  /* 只对英文起作用，以字母作为换行依据。 */
  word-break: break-all;
  /* 只对英文起作用，以单词作为换行依据。*/
  word-wrap: break-word;
  /* 只对中文起作用，强制换行。*/
  white-space: pre-wrap;
}
// 强制不换行
@mixin noWrap {
  /* 只对英文起作用，以字母作为换行依据。 */
  word-break: normal;
  /* 只对英文起作用，以单词作为换行依据。*/
  word-wrap: normal;
  /* 只对中文起作用，强制换行。*/
  white-space: nowrap;
}

//阴影
//x轴方向 y轴方向 模糊距离  阴影颜色
@mixin shadow-base($x: 0rpx, $y: 3rpx, $b: 6rpx, $c: rgba(#000, 0.06)) {
  box-shadow: $x $y $b $c;
}

//盒子大小
@mixin size($width: 100%, $height: 100%) {
  @if $width {
    width: $width;
  }
  @if $height {
    height: $height;
  }
}

//边框相关
//默认边框
@mixin borderBase($height: 2rpx, $style: solid, $color: #ddd) {
  border: $height $style $color;
}

@mixin borderCard($width: 702rpx, $height: 816rpx) {
  margin: 40rpx auto;
  width: $width;
  height: $height;
  box-sizing: border-box;
  border-radius: 32rpx;
  padding: 2rpx;
  background-image: -webkit-linear-gradient(90deg, #f6e7a5, #f7a375);
  .card-conr {
    padding: 40rpx;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #353130, #1a1717);
    box-sizing: border-box;
    border-radius: 32rpx;
    .conr-title {
      margin-bottom: 48rpx;
      img {
        width: 100%;
        height: 68rpx;
        object-fit: contain;
      }
    }
  }
}
